<template>
  <div class="vipInfo">
    <van-nav-bar
      id="van-bar"
      style="color: #fff"
      :title="title"
      fixed
      :border="border"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    >
      <template #left>
        <img
          :style="{ width: widthPx, height: heightPx }"
          src="@/assets/myicon/nav-back-white.png"
        />
      </template>
      <template #right> 规则说明 </template>
    </van-nav-bar>
    <div
     
    >
      <div class="head" :style="'padding-top:' + topheight + 'px;'">
        <div class="left">
            <div class="box">
          <p style=""><span style="font-size: 24px;">{{data.invitation_num}}</span>人</p>
        <p style="margin-top: 12px;" @click="goto('/invite')">有效邀请好友<img style="vertical-align:text-bottom;" src="@/assets/myicon/arrow-right-white.png" alt=""></p>
            </div>
        </div>
         <div class="right">
              <div class="box">
          <p style=""><img style="display: inline-block;width: 20px;height: 20px;margin: 2px 0; margin-right: 9px;" src="@/assets/myicon/me-diamond-white.png" alt="" srcset=""><span style="font-size: 24px; vertical-align: top;">{{data.diamond_num}}</span></p>
        <p style="margin-top: 12px;"  @click="goto('/income')">钻石收入明细<img style="vertical-align:text-bottom;" src="@/assets/myicon/arrow-right-white.png" alt=""></p>
            </div>
        </div>
      </div>
      <div class="vipinfo">
        <p class="title">1 链接邀请</p>
        <div class="box2">
            <p>{{data.invitation_desc}}</p>
            <p>{{data.invitation_link}}</p>
            <div class="btn">复制文字及链接</div>
        </div>
         <p class="title">2 二维码邀请</p>
            <div class="box3">
                <img :src="data.invitation_qrcode" class="ewm" alt="">
                <p style="font-size: 14px;">邀请二维码</p>
                <p style="font-size: 10px;color: #767676;">保存二维码，并发送给好友</p>
            </div>
       
      </div>
    </div>
     <div class="box4" v-if="isShow" @click="isShow=false">
        <div class="bg1"></div>
    <div class="error">
        <div class="head1">
            <span>规则说明</span>
            <img src="@/assets/myicon/popup-rule.png" alt="">
        </div>
        <div class="content">
            {{data.invitation_rule}}
        </div>
    </div>
  </div>
  </div>
</template>

<script>
import { getSpread } from "@/api/index"
export default {
  data() {
    return {
      border: "",
      widthPx: "28px",
      heightPx: "28px",
      topheight: 0,
      title: "邀请好友",
      isShow:false,
     data:{},
    };
  },
  mounted() {
    this.topheight = document.getElementById("van-bar").offsetHeight;
    this.getdata()
  },
  
  methods: {
   
    onClickRight(){
    //   this.$router.push('/vip/buylist')
    this.isShow=true
    },
    onClickLeft() {
      this.$router.back();
    },
    goto(e) {
      this.$router.push(e)
    },
    getdata(){
         getSpread().then((res) => {
        // this.list=res.data.list
       this.data=res.data
        console.log(res.data);
        // 加载状态结束
      })
    },
    SetisActive(e){
      this.isActive=e
      this.getprice()
    }
  },
};
</script>

<style scoped>
.bg {
  width: 100%;
  height: 100vh;
  position: fixed;
  background: linear-gradient(180deg, #cde1fd 0%, rgba(255, 255, 255, 0) 100%);
  top: 0;
  height: 148px;
  /* background: url('../../assets/myicon/bg.png') no-repeat; */
}
.vipInfo {
  
}

>>> .van-nav-bar__title {
  color: #fff;
}
.head {
  width: 375px;
  display: flex;
  color: #fff;
  background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
  border-radius: 0px 0px 8px 8px;
}
.left{
    margin: 11px 0 19px 0;
    height: 80px;
    flex: 1;

    border-right: 1px solid #fff;
}
.right{
    margin: 11px 0 19px 0;
    height: 80px;
    flex: 1;
    border-left: 1px solid #fff;
}
.box2{
    width: 100%;
    padding:13px 7px;
    font-size: 14px;
    box-sizing: border-box;
    color: #3D3D3D;
    background-color: #EEEEEE;
}
.box3{
    width: 100%;
    padding:26px ;
    color: #3D3D3D;
    text-align: center;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #EEEEEE;
}
.box3 p{
    margin-top: 8px;
}
.box4{
    z-index: 9999;
   width: 100vw;
   position: fixed;
   top: 0;
   right: 0;
height: 100vh;
}
.error{
    width: 310px;
background: #FFFFFF;
position: absolute;
overflow: hidden;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 8px;
}
.head1{
    width: 100%;
    line-height: 48px;
height: 48px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px 8px 0px 0px;
}
.head1 span{
     margin: 0px 24px;
     font-size: 16px;
font-family: PingFangSC, PingFang SC;
font-weight: 500;
color: #FFFFFF;
}
.head1 img{
    float: right;
    display: inline-block;
    margin: 8px 24px;
}
.content{
    margin: 30px auto;
    width: 264px;
    font-size: 14px;
font-family: PingFangSC, PingFang SC;
font-weight: 400;
line-height: 20px;
color: #3D3D3D;
}
.vipinfo{
      width: 343px;
    margin: 0 auto;
}
.box{
 font-size: 14px;
    
    margin: 7px 42px 38px 42px;
    width: 103px;
    height: 54px;
}
.bg1{
    /* background-color: #ff */
background: rgba(0,0,0,0.5);
width: 100%;
height: 100%;

}
.van-cell::after {
  border-color: #d8d8d8;
}
.van-cell-group,
.van-cell,
.van-nav-bar {
  background: transparent;
}
>>> .van-nav-bar__content {
  background: transparent !important;
}
.van-cell__value {
  color: #1a1a1a;
  font-weight: 500;
}
.title {
  height: 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1a1a1a;
  line-height: 16px;
  margin: 16px 0;
  -webkit-background-clip: text;
}
.btn{
    width: 132px;
height: 32px;
background: linear-gradient(180deg, #3764EC 0%, #6B85F7 100%);
border-radius: 8px;
line-height: 32px;
text-align: center;
color: #fff;
margin: 0 auto;
margin-top: 36px;
font-size: 12px;
}
.ewm{
    width: 140px;
height: 140px;
display: block;
border-radius: 8px;
margin: 0 auto;
margin-top: 20px;
}

</style>